<template>
	<vCommonPage type="1" :title="$route.query.title">
		<div slot="customContent" class="content zyqd">
			<div class="flex  spaceBt">
				<el-date-picker v-model="dateValue" type="daterange" size="large" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" @change="dataChange"
					:picker-options="pickerOptions">
				</el-date-picker>
				<div class="title">
					患者：{{$store.state.user.userinfo.patientName}}
				</div>
			</div>
			<div class="tableBox" v-show="$route.query.code == 'mzqd'">
				<el-table :data="tableData" class="table" :header-cell-style="$tableTitleStye"
					:cell-style="{color:'#435C7A'}" style="width: 100%;font-size: 2.028571rem;font-weight: 400;"
					:show-overflow-tooltip="true">
					<el-table-column prop="visitId" label="挂号单号" width="200"></el-table-column>
					<el-table-column prop="deptName" label="就诊科室"></el-table-column>
					<el-table-column prop="visitTime" label="结算日期" width="300"></el-table-column>
					<el-table-column prop="fee" label="费用合计">
						<template scope="scope">
							<span style="color: red">{{scope.row.fee}}</span>
						</template>
					</el-table-column>
					<el-table-column width="180" label="明细">
						<template slot-scope="scope">
							<el-button class="elBtn" @click="detail(scope.row)" type="primary" size="medium">详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="tableBox" v-show="$route.query.code == 'zyqd'">
				<el-table :data="tableData" class="table" :header-cell-style="$tableTitleStye"
					:cell-style="{color:'#435C7A'}" style="width: 100%;font-size: 2.028571rem;font-weight: 400;"
					:show-overflow-tooltip="true">
					<el-table-column prop="inPatientId" label="住院号" width="200"></el-table-column>
					<el-table-column prop="inDeptName" label="出院科室"></el-table-column>
					<el-table-column prop="outDate" label="结算日期" width="300"></el-table-column>
					<el-table-column prop="totalAmount" label="费用合计">
						<template scope="scope">
							<span style="color: red">{{scope.row.totalAmount}}</span>
						</template>
					</el-table-column>
					<el-table-column width="180" label="明细">
						<template slot-scope="scope">
							<el-button class="elBtn" @click="detail(scope.row)" type="primary" size="medium">详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getOutpatientList,
		getInPatientList
	} from "@api/apiBox/qdcx"
	import moment from 'moment'
	export default {
		name: "zyqd",
		data() {
			return {
				tableData: [],
				totalPay: 0,
				value1: '',
				fotmData: {
					data: {
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						cardType: this.$store.state.appointment.card.num, //卡片类别
						endTime: "",
						beginTime: '',
						patientId: this.$store.state.user.userinfo.patientId //患者ID
					},
					that: this
				},
				dateValue: '',
				beginDate: moment(new Date).format('yyyy-MM-DD HH:mm:ss'),
				endDate: this.$getTime.fun_date(7) + ' 00:00:00',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				}
			};
		},
		methods: {
			detail(item) {
				console.log(item)
				this.$router.push({
					name: 'mzqdDetail',
					query: {
						title: this.$route.query.code == 'mzqd' ? "门诊清单" : "住院请单",
						item: this.fotmData.data,
						code: this.$route.query.code,
						data: item
					}
				})
			},
			//门诊清单数据初始化
			async initDataByMzqd() {
				this.fotmData = {
					data: {
						beginTime: moment(new Date).format('yyyy-MM-DD HH:mm:ss'),
						endTime: this.$getTime.fun_date(7) + ' 00:00:00',
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						cardType: this.$store.state.appointment.card.num, //卡片类别
						patientId: this.$store.state.user.userinfo.patientId, //患者ID
						idNo: this.$store.state.user.userinfo.idNo //身份证号
					},
					that: this
				}
				const res = await getOutpatientList(this.fotmData)
				this.tableData = res.data;

			},
			//住院清单数据初始化
			async initDataByZyqd() {
				this.fotmData = {
					data: {
						beginDate:'2020-01-01 00:00:00',
						// beginDate: moment(new Date).format('yyyy-MM-DD HH:mm:ss'),
						endDate: this.$getTime.fun_date(7) + ' 00:00:00',
						cardType: this.$store.state.appointment.card.num, //卡片类别
						// cardNo: this.$store.state.appointment.cardNo, //卡片编号
						inPatientId: this.$store.state.user.userinfo.inPatientId, //患者ID
						patientId: this.$store.state.user.userinfo.patientId ,//患者ID
					},
					that: this
				}
				const res = await getInPatientList(this.fotmData)
				this.tableData = res.data;
			},
			async dataChange(date) {
				this.beginDate = moment(date[0]).format('yyyy-MM-DD HH:mm:ss');
				this.endDate = moment(date[1]).format('yyyy-MM-DD HH:mm:ss');
				if (this.$route.query.code == 'mzqd') {
					this.fotmData = {
						data: {
							beginTime: this.beginDate,
							cardNo: this.$store.state.appointment.cardNo, //卡片编号
							cardType: this.$store.state.appointment.card.num, //卡片类别
							endTime: this.endDate,
							patientId: this.$store.state.user.userinfo.patientId //患者ID
						},
						that: this
					}
					const res = await getOutpatientList(this.fotmData)
					this.tableData = res.data;
				}
				if (this.$route.query.code == 'zyqd') {
					this.fotmData = {
						data: {
							beginTime: this.beginDate,
							cardType: this.$store.state.appointment.card.num, //卡片类别
							endTime: this.endDate,
							cardNo: this.$store.state.appointment.cardNo, //卡片编号
							inPatientId: this.$store.state.user.userinfo.patientId ,//患者ID
						},
						that: this
					}
					const res = await getInPatientList(this.fotmData)
					this.tableData = res.data;
				}

			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			if (this.$route.query.code == 'mzqd') {
				this.initDataByMzqd();
			}
			if (this.$route.query.code == 'zyqd') {
				this.initDataByZyqd();
			}
		}
	};
</script>
<style scoped>
	.flex {
		display: flex;
	}

	.red {
		color: #FE5F5F;
	}

	.hui {
		color: #A1ADBB;
	}

	.deepHui {
		color: #435C7A;
	}

	.blueBottom {
		width: 132px;
		height: 90px;
		background: #57A8FF;
		border-radius: 6px;
		display: flex;
		margin-left: 0px;
		margin-right: 20px;
		/*实现垂直居中*/
		align-items: center;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.totalPay {
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-left: 300px;
		padding-top: 20px;
	}

	.content {
		width: calc(100% - 20px);
		height: 100%;
		padding: 0px 10px;
	}

	.title {
		font-size: 2.4375rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		text-align: right;
		margin-bottom: 0rem;
	}

	.elBtn {
		font-size: 2.5rem;
	}

	.table {
		margin-top: 30px;
		font-size: 2.028571rem;
		font-weight: 400;
	}

	.spaceBt {
		justify-content: space-between;
		padding-top: 10px;
	}

	.tableBox {
		max-height: 600px;
		overflow: auto;
		overflow-x: hidden;
		borderRadius: '8px 8px 0px 0px';
	}



	.blueBottom {
		width: 132px;
		height: 90px;
		background: #57A8FF;
		border-radius: 6px;
		display: flex;
		/*实现垂直居中*/
		align-items: center;
	}

	.pageBox {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		font-size: 3.5vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		/*实现垂直居中*/
		align-items: center;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
